<div class="jigsaw-range-time">
    <jigsaw-time [date]="beginDate" [(gr)]="_$gr" [limitStart]="_$limitStart" [limitEnd]="_$limitEnd"
                 (dateChange)="_$dateChange('beginDate',$event)" [refreshInterval]="refreshInterval"
                 [weekStart]="weekStart"
                 [recommendedBegin]="recommendedBegin" [recommendedEnd]="recommendedEnd"
                 [recommendedLabel]="recommendedLabel" [grItems]="grItems" #timeStart
                 class.jigsaw-range-time-startTime="false" (grChange)="_$grChange($event)">
    </jigsaw-time>
    <jigsaw-time [date]="endDate" [(gr)]="_$gr" [limitStart]="beginDate" [limitEnd]="_$endTimeLimitEnd"
                 (dateChange)="_$dateChange('endDate',$event)" [refreshInterval]="refreshInterval"
                 [weekStart]="weekStart"
                 [recommendedBegin]="recommendedBegin" [recommendedEnd]="recommendedEnd"
                 [recommendedLabel]="recommendedLabel" #timeEnd
                 [class.jigsaw-range-time-endTime]="(grItems && grItems.length!=0)">
    </jigsaw-time>
    <div *ngIf="_$shortcuts && _$shortcuts.length" class="jigsaw-range-time-shortcuts">
        <span *ngFor="let item of _$shortcuts" (click)="_changeShortcut(item)">
            {{item.label}}
        </span>
    </div>
</div>
